const menu = {
  tableMenuE: document.getElementById('table-menu'),
  objectMenuE: document.getElementById('object-menu'),
  setPos(element, event) {
    let left = event.clientX
    if (left > innerWidth / 2) {
      left -= element.offsetWidth
    }
    let top = event.clientY
    if (top > innerHeight / 2) {
      top -= element.offsetHeight
    }
    element.style.left = left + 'px'
    element.style.top = top + 'px'
  },
  openTableMenu(e) {
    menu.objectMenuE.style.display = ''
    menu.tableMenuE.style.display = 'block'
    menu.setPos(menu.tableMenuE, e)
    //
  },
  openObjectMenu(e, objE) {
    menu.tableMenuE.style.display = ''
    menu.objectMenuE.style.display = 'block'
    menu.setPos(menu.objectMenuE, e)
    const { obj } = objE
    if (obj.backsrc) {
      menu.objectMenuE.children[0].style.display = ''
      menu.objectMenuE.children[0].onclick = () => _.send({ type: 'turn', objectId: obj.id })
    } else {
      menu.objectMenuE.children[0].style.display = 'none'
    }
    menu.objectMenuE.children[1].onclick = () => {
      dialog.alert('顺时针旋转项目（deg）').form(['<input type="number">', '确定', '取消'], (click, values) => {
        dialog.close()
        const deg = Number(values[0])
        if (click == 1 && isFinite(deg)) {
          _.send({ type: 'rotate', objectId:obj.id, deg })
        }
      }).open()
    }
    if (obj.fixed) {
      menu.objectMenuE.children[2].style.display = 'none'
      menu.objectMenuE.children[3].style.display = 'none'
    } else {
      menu.objectMenuE.children[2].style.display = ''
      menu.objectMenuE.children[3].style.display = ''
      const getStack = () => {
        const list = []
        for (const ee of _.table.children) {
          if (ee == objE ||
              ee.obj && ee.player == null && !ee.obj.fixed &&
              ee.obj.left + ee.obj.width > obj.left &&
              ee.obj.left < obj.left + obj.width &&
              ee.obj.top + ee.obj.height > obj.top &&
              ee.obj.top < obj.top + obj.height) {
            list.push(ee)
          }
        }
        return list
      }
      menu.objectMenuE.children[2].onclick = ev => {
        if (objE.player != null || obj.fixed) {
          return
        }
        _.selectAll(objE, getStack(), ev.pageX - obj.left, ev.pageY - obj.top)
      }
      menu.objectMenuE.children[3].onclick = () => {
        if (objE.player != null || obj.fixed) {
          return
        }
        _.send({ type: 'shuffle', list: getStack().map(ee => ee.obj.id) })
      }
    }
    menu.objectMenuE.children[4].innerText = obj.fixed ? '取消固定' : '固定'
    menu.objectMenuE.children[4].onclick = () => _.send({ type: 'fix', objectId: obj.id, fixed: !obj.fixed })
    menu.objectMenuE.children[5].onclick = () => _.send({ type: 'bottom', objectId: obj.id })
    menu.objectMenuE.children[6].onclick = () => _.send({ type: 'clone', objectId: obj.id })
    menu.objectMenuE.children[7].onclick = () => {
      dialog.alert('是否移除该项目？').form(['确定', '取消'], click => {
        dialog.close()
        if (click == 0) {
          _.send({ type: 'delete', objectId: obj.id })
        }
      }).open()
    }
  },
  isOpen() {
    return !!(menu.tableMenuE.style.display || menu.objectMenuE.style.display)
  },
  close() {
    menu.tableMenuE.style.display = ''
    menu.objectMenuE.style.display = ''
  }
}
